vue项目实现pdf文件预览功能
下载vue-pdf包
npm install --save vue-pdf
template模板内容:
<pdf :src="pdfFile"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdf">
</pdf>
<div class="pageButton">
<el-button size="mini" @click="changePage(0)" round>上一页</el-button>
<span> {{currentPage}} / {{pageCount}} </span>
<el-button size="mini" @click="changePage(1)" round>下一页</el-button>
</div>
引入组件,定义变量
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data(){
return {
pdfFile: "",
currentPage: 0,
pageCount: 0,
}
},
methods:{
changePage (val) {
if (val === 0 && this.currentPage > 1) {
this.currentPage --;
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage ++;
}
},
loadPdf () {
this.currentPage = 1
},
}
}